import React, { useState, useEffect } from "react";
import {
  Search,
  PullRefresh,
  Toast,
  SwipeCell,
  Flex,
  Button,
  Image,
  Typography,
  Swiper,
} from "react-vant";
import { useNavigate } from "react-router-dom";
import "./index.css";
import axios from "axios";
const Index: React.FC = () => {
  const [value, setValue] = useState("");
  const [list, setList] = useState([]);
  const [images, setImages] = useState([
    "https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=2397542458,3133539061&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=2763645735,2016465681&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=3911840071,2534614245&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=3908717,2002330211&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=318887420,2894941323&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=1063451194,1129125124&fm=193&f=GIF",
  ]);
  const navigate = useNavigate();
  const render = () => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data.list);
    });
  };
  useEffect(() => {
    render();
  }, []);
  const detail = (id: any) => {
    navigate(`/detail/${id}`);
  };
  const ss = () => {
    navigate("/search");
  };

  const onRefresh = (showToast: any) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (showToast) {
          window.location.reload();

          Toast.info("刷新成功");
        }
        resolve(true);
      }, 1000);
    });
  };
  const del = (id: any) => {
    axios.delete("/api/del", { params: { id } }).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        Toast.success(msg);
        render();
      }
    });
  };

  return (
    <div className="box">
      <div className="top" onClick={() => ss()}>
        <Search
          value={value}
          onChange={setValue}
          clearable
          placeholder="请输入搜索的内容"
        />
      </div>
      <div className="banner">
        <div className="demo-swiper">
          <Swiper autoplay={2000}>
            {images.map((image) => (
              <Swiper.Item key={image}>
                <Image lazyload src={image} />
              </Swiper.Item>
            ))}
          </Swiper>
        </div>
      </div>
      <div className="button">
        <PullRefresh
          onRefresh={() => onRefresh(true)}
          // 下拉刷新后触发事件
        >
          {list.length > 0 &&
            list.map((v: any, i: any) => (
              <div key={i} onClick={() => detail(v.id)}>
                <SwipeCell
                  rightAction={
                    <Button
                      style={{ height: "100%" }}
                      square
                      type="danger"
                      onClick={() => del(v.id)}
                    >
                      删除
                    </Button>
                  }
                >
                  <Flex className="demo-product-card" align="stretch">
                    <Image src={v.img} className="demo-product-card__img" />
                    <Flex
                      direction="column"
                      justify="between"
                      className="demo-product-card__content"
                    >
                      <div>
                        <Typography.Title level={5}>{v.title}</Typography.Title>
                        <Typography.Text type="secondary">
                          {v.word}
                        </Typography.Text>
                      </div>
                      <Flex justify="between" align="center">
                        <Typography.Text strong size="lg">
                          ¥{v.price}
                        </Typography.Text>
                      </Flex>
                    </Flex>
                  </Flex>
                </SwipeCell>
              </div>
            ))}
        </PullRefresh>
      </div>
    </div>
  );
};
export default Index;
